const { Message, Loading } = UI;//全局变量
function AjaxRequest({ url, method = 'GET', headers, data }) {
    let ld = Loading.service({
        text: "加载中...",//loading文本,
        textColor: "",//文本颜色
        background: "",//背景颜色遮罩层
    })
    headers = { 'user-id': localStorage.getItem('id'),'token': localStorage.getItem('token'), ...headers }
    return new Promise((resolve, reject) => {
        $.ajax({
            url,
            method,
            data,
            headers,
            success(res) {
                const { data } = res || {};
                //关闭
                ld.close();
                if (!res.flag) {
                    Message.error({
                        message: data.message,
                        duration: 3000,
                        showClose: true,
                    })
                    reject(data.message);
                }
                resolve(data)
            },
            error(res) {
                Message.error({
                    message: JSON.stringify(res),
                    duration: 3000,
                    showClose: true,
                })
                //关闭
                ld.close();
                reject(res);
            },
        })
    })
}

new Vue({
    el: "#app",
    data() {
        return {
            msg: 'hello',
            userId: '',
            username: '',
            token: '',
            name: '',
            avator: '',
            zg: "",
            roomID: '0003',
            isTk: false,
            time: 0,// s
            streamList: [],
            isQuit: false,
            currentUser: {},//弹框的当前用户显示信息
        }
    },

    computed: {
        callTime() {
            return this.formatSeconds(this.time);
        }
    },

    created() {
        // 通过url获取用户id，name，和token。
        this.getUserInfo();
    },

    mounted() {
        window.onbeforeunload = () => {
            alert("关闭")
        }
    },

    beforeDestroy() {
        if (this.isQuit) return;
        this.quit();
    },

    methods: {
        //秒数转化为时分秒
        formatSeconds(value) {
            var secondTime = parseInt(value);// 秒
            var minuteTime = 0;// 分
            var hourTime = 0;// 小时
            if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
                //获取分钟，除以60取整数，得到整数分钟
                minuteTime = parseInt(secondTime / 60);
                //获取秒数，秒数取余，得到整数秒数
                secondTime = parseInt(secondTime % 60);
                //如果分钟大于60，将分钟转换成小时
                if (minuteTime > 60) {
                    //获取小时，获取分钟除以60，得到整数小时
                    hourTime = parseInt(minuteTime / 60);
                    //获取小时后取余的分，获取分钟除以60取余的分
                    minuteTime = parseInt(minuteTime % 60);
                }
            }
            var result = "" + parseInt(secondTime) + "秒";

            if (minuteTime > 0) {
                result = "" + parseInt(minuteTime) + "分" + result;
            }
            if (hourTime > 0) {
                result = "" + parseInt(hourTime) + "小时" + result;
            }
            return result;
        },
        
        async zegoInit() {
            // 项目唯一标识 AppID，Number 类型，请从 ZEGO 控制台获取
            let appID = 839080308;
            // 接入服务器地址 Server，String 类型，请从 ZEGO 控制台获取（获取方式请参考上文“前提条件”）
            let server = "wss://webliveroom839080308-api.imzego.com/ws";
            // 初始化实例
            const zg = new ZegoExpressEngine(appID, server);
            this.zg = zg;
            // 登录房间，成功则返回 true
            // userUpdate 设置为 true 才能收到 roomUserUpdate 回调。
            let userID = this.userId;
            let userName = this.name;
            let roomID = this.roomID;
            let token = this.token;
            zg.loginRoom(roomID, token, { userID, userName }, { userUpdate: true }).then(async result => {
                if (result == true) {
                    this.$message.success({
                        showClose: true,
                        message: "登录成功",
                        duration: 3000,
                        center: true
                    });
                    // 进入成功日志添加
                    AjaxRequest({
                        url: 'https://qiaonan.info:8124/addVideoLog',
                        method: "POST",
                        data: {
                            name: this.name,
                            avator: this.avator,
                            time: new Date().format('yyyy年MM月dd日 hh:mm:ss秒'),
                            type: 'enter',
                            content: `用户${this.name}进入了房间`
                        }
                    })
                    // 创建流、预览
                    // 调用 createStream 接口后，需要等待 ZEGO 服务器返回流媒体对象才能执行后续操作
                    const localStream = await zg.createStream();
                    // 创建媒体流播放组件对象，用于预览本地流
                    const localView = zg.createLocalStreamView(localStream);
                    // 将播放组件挂载到页面，"local-video" 为组件容器 <div> 元素的 id 。
                    localView.play("local-video");
                    // 开始推流，将自己的音视频流推送到 ZEGO 音视频云
                    let streamID = new Date().getTime().toString() + this.userId;
                    zg.startPublishingStream(streamID, localStream);

                    setInterval(() => {
                        this.time = this.time + 1
                    }, 1000);


                }
            });
            // 房间状态更新回调
            zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {
                if (reason == 'LOGINING') {
                    console.log(extendData, 'isExitsUser')
                    // 登录中
                } else if (reason == 'LOGINED') {
                    // 登录成功
                    //只有当房间状态是登录成功或重连成功时，推流（startPublishingStream）、拉流（startPlayingStream）才能正常收发音视频
                    //将自己的音视频流推送到 ZEGO 音视频云
                } else if (reason == 'LOGIN_FAILED') {
                    // 登录失败
                } else if (reason == 'RECONNECTING') {
                    // 重连中
                } else if (reason == 'RECONNECTED') {
                    // 重连成功
                } else if (reason == 'RECONNECT_FAILED') {
                    // 重连失败
                } else if (reason == 'KICKOUT') {
                    // 被踢出房间
                } else if (reason == 'LOGOUT') {
                    // 登出成功
                } else if (reason == 'LOGOUT_FAILED') {
                    // 登出失败
                }
            });

            //房间内其他用户进出房间的通知
            //只有调用 loginRoom 登录房间时传入 ZegoRoomConfig，且 ZegoRoomConfig 的 userUpdate 参数为 “true” 时，用户才能收到 roomUserUpdate回调。
            zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
                console.log(updateType, streamList, '==========================')
                // this.streamList = streamList.map((item) =>item.user);
                if (updateType == 'ADD') {
                    // 流新增，开始拉流
                    // 这里为了使示例代码更加简洁，我们只拉取新增的音视频流列表中第的第一条流，在实际的业务中，建议开发者循环遍历 streamList ，拉取每一条音视频流 
                    const length = streamList.length
                    const arrUserIdList = this.streamList.map(ele => ele.userID);
                    streamList.forEach(async (item, index) => {
                        const streamID = item.streamID;
                        // streamList 中有对应流的 streamID
                        const remoteStream = await zg.startPlayingStream(streamID);
                        // 创建媒体流播放组件对象，用于播放远端媒体流 。
                        const remoteView = zg.createRemoteStreamView(remoteStream);
                        // if(arrUserIdList.includes(item.user.userID)) return
                        this.$message.info({
                            showClose: true,
                            message: item.user.userName + '进入房间',
                            duration: 3000,
                            center: true
                        });
                        this.streamList.push(item.user)
                        this.$nextTick(() => {
                            console.log('=============', this.streamList)
                            console.log("remote-video" + index, "remote-video" + (this.streamList.length - 1))
                            // 将播放组件挂载到页面，"remote-video" 为组件容器 <div> 元素的 id 。
                            if (length == 1) {
                                remoteView.play("remote-video" + (this.streamList.length - 1));

                            } else {
                                remoteView.play("remote-video" + index);
                            }
                        })
                    })


                    // this.$nextTick(() => {

                    // })
                    // if(this.userId != streamList.user.userID) {

                    // }


                } else if (updateType == 'DELETE') {
                    // 删除
                    streamList.forEach((item) => {
                        this.streamList.some((ele, index) => {
                            if (ele.userID === item.user['userID']) {
                                this.streamList.splice(index, 1);

                                this.$message.warning({
                                    showClose: true,
                                    message: item.user.userName + '退出房间',
                                    duration: 3000,
                                    center: true
                                });
                                return true
                            }
                        })
                    })
                }
            });

            zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
                // 房间内其他用户音视频流变化的通知
            });
            const result = await zg.checkSystemRequirements();
            // 返回的 result 为兼容性检测结果。 webRTC 为 true 时表示支持 webRTC，其他属性含义可以参考接口 API 文档。
            console.log(result);
        },

        getUserInfo() {
            this.name = localStorage.getItem('name');
            this.username = localStorage.getItem('username');
            this.avator = localStorage.getItem('avator');
            this.userId = localStorage.getItem('id');
            AjaxRequest({
                url: 'https://qiaonan.info:8126/get/token',
            }).then((res) => {
                this.token = res.token;
                // 初始化
                this.zegoInit();
            })
        },

        quit() {
            this.isQuit = true;
            this.zg.logoutRoom(this.roomID);
            // 进入成功日志添加
            AjaxRequest({
                url: 'https://qiaonan.info:8124/addVideoLog',
                method: "POST",
                data: {
                    name: this.name,
                    avator: this.avator,
                    time: new Date().format('yyyy年MM月dd日 hh:mm:ss秒'),
                    type: 'out',
                    content: `用户${this.name}退出了房间`
                }
            }).then(() => {
                alert('退出视频通话');
                window.close();
            })
        },

        timeFormat(string) {
            // console.log(string)
            let stringDate = string.slice(0, 10);
            let stringTime = string.slice(10);
            let currentDate = new Date().format('yyyy-MM-dd');
            if (stringDate == currentDate) {
                return stringTime
            } else {
                return string
            }
        },

        openTk(item, index) {
            this.isTk = true;
            console.log('======', item)
            this.currentUser = item;
            this.index = index;
            // 异步获取
            this.$nextTick(() => {
                let video = document.getElementById('remote-video' + index);
                if (index == -1) {
                    video = document.getElementById('local-video');
                }
                this.video = video;
                let tk = document.getElementById('tk');
                tk.appendChild(video);
            })
        },

        close() {
            // 本人
            if (this.index == -1) {
                document.getElementById('local').appendChild(this.video);
            } else {
                document.getElementById('remote' + this.index).appendChild(this.video,)
            }
            this.isTk = false;
        }
    }
})
